<!--
 * @Author: Wangtao
 * @Date: 2020-09-21 09:55:09
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-03-24 14:27:27
-->
<template>
  <div
    class="data-details-oprate"
    :class="{ 'data-details-oprate': true, showPadding: !isShowFold }"
  >
    <el-row class="data-details-oprate-row">
      <el-col :span="20">
        <el-row>
          <el-col :span="6">
            <span class="oprate-tit">执行进度:</span>
            <span class="oprate-con">{{ getFormat(data) }}</span>
          </el-col>
          <el-col :span="6">
            <span class="oprate-tit">执行率:</span>
            <span class="oprate-con">{{ getProcess(data) + '%' }}</span>
          </el-col>
          <el-col :span="6">
            <span class="oprate-tit">接通数:</span>
            <span class="oprate-con">{{ data.dealing }}</span>
          </el-col>
          <el-col :span="6">
            <span class="oprate-tit">接通率:</span>
            <span class="oprate-con">{{ getConnectionRate(data) + '%' }}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" class="oprate-btn">
        <!-- <el-button
          type="primary"
          v-show="data.status === 'DEALING'"
          round
          @click="nextDialot"
          ><i class="V7_iconfont V7_iconV7tubiao_gerenshezhi-huaji"></i
          >下一通</el-button
        > -->
        <el-button v-show="isShowFold" round @click="showDetail">{{
          isShowDetails ? '收起' : '展开'
        }}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator'
import taskMixin from './task-mixin'
import { CtiModule } from '@/store/modules/cti/index'
import { IvrModule } from '@/store/modules/config/ivr'
@Component({
  name: 'outbound-oprate',
  components: {}
})
export default class OutboundOprate extends Mixins(taskMixin) {
  private isShowDetails = false
  @Prop({ default: {} }) private data: any
  @Prop({ default: true }) private isShowFold: boolean | undefined

  private showDetail () {
    this.isShowDetails = !this.isShowDetails
    this.$emit('showDetail', this.isShowDetails)
  }

  private nextDialot () {
    this.getNextDialoutStatus(this.data._id).then((status) => {
      if (status) {
        const actionData = Object.assign({ taskId: this.data._id, account: this.account, user: this.userId })
        const data = { url: '/call/action/task/data/next', method: 'POST', data: actionData }
        IvrModule.IvrCommonAction(data).then((res: any) => {
          if (res.success) {
            if (typeof res.data === 'string') {
              (this.$message as any)({ message: '未导入号码', type: 'error' });
            } else {
              const calleeNumber = res.data.phone
              const taskId = res.data.taskId
              CtiModule.CtiDialoutAction({ calleeNumber, taskId }).then((dialoutRes: any) => {
                if (dialoutRes && dialoutRes.success) {
                  (this.$message as any)({ message: '外呼成功', type: 'success' });
                  this.$emit('dialoutSuccess');
                  (this.$bus as any).$emit('initCallTaskCall', {
                    phone: calleeNumber
                  })
                }
              })
            }
          }
        })
      } else {
        (this.$message as any)({ message: '当前任务无法执行', type: 'error' });
      }
    })
  }

  private getNextDialoutStatus (taskId: string) {
    return new Promise((resolve) => {
      const actionData = Object.assign({ _id: taskId })
      const data = { url: '/call/action/task/search', method: 'POST', data: actionData }
      IvrModule.IvrCommonAction(data).then((res: any) => {
        if (res.success) {
          if (res.data && res.data.status === 'DEALING') {
            resolve(true)
          } else {
            resolve(false)
          }
        } else {
          resolve(false)
        }
      })
    })
  }
}
</script>

<style lang="stylus" scoped>
.showPadding
  padding-left 24px
  padding-right 24px
.data-details-oprate
  // display flex
  justify-content space-between
  align-items center
  padding-top 16px
  padding-bottom 16px
  box-sizing border-box
  width 100%
  background #f4f9fd
  .data-details-oprate-row
    display flex
    align-items center
    .oprate-tit
      color #767E91
      margin-right 8px
    .oprate-con
      color #008BEE
      font-size 16px
      font-weight 600
    .oprate-btn
      width 20%
      display flex
      justify-content flex-end
      .V7_iconfont
        font-size 12px
</style>
